<!-- pages/components/switch/switch.vue -->
<template>
    <view class="wrapper">
        <view class="title">1. 基础用法</view>
        <view class="box">
            <switch v-model="isOn" />
        </view>
        <view class="result-small">开关状态: {{isOn}}</view>
        
        <view class="title">2. 自定义颜色</view>
        <view class="box">
            <!-- color 属性只在 type="switch" 时有效 -->
            <switch v-model="isColoredOn" color="#aa007f" />
        </view>
        <view class="result-small">开关状态: {{isColoredOn}}</view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

// v-model 绑定的是布尔值 (true/false)
const isOn = ref(false);
const isColoredOn = ref(true); // 默认开启
</script>

<style>
/* 复用上一页的 .wrapper, .title, .box, .result-small 样式 */
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    margin-top: 10px;
}
.box {
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
}
.result-small {
    margin-top: 10px;
    padding: 5px;
    font-size: 14px;
    color: #666;
}
</style>